<template>
    <div class="test-container">
        <h3 id="myh3">Test.vue 组件 --- {{ books.length }} 本图书</h3>
        <p id="ppp">message 的值是：{{ message }}</p>
        <button @click="message += '~'">修改 message 的值</button>
    </div>
</template>

<script>
    export default {
        props: ['info'],
        data() {
            return {
                message: 'hello vue.js',
                books: []
            }
        },
        methods: {
            show() {
                console.log('调用了 Test 组件的 show 方法！')
            },
            // 使用Ajax请求图书列表数据
            initBookList() {
                const xhr = new XMLHttpRequest()
                xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
                xhr.send()
                xhr.addEventListener('load', () => {
                    const res = JSON.parse(xhr.responseText)
                    console.log(res)
                    this.books = res.data
                })
            }
        },
        // （不重要）创建阶段的第一个生命周期函数 初始化事件和生命周期函数
        // props/data/methods尚未创建，都处于不可用状态
        beforeCreate() {
            // console.log(this.info)
            // console.log(this.message)
            // this.show()
        },
        // （重要）创建阶段的第二个生命周期函数 初始化 props、data、methods
        // 组件的 props/data/methods 已创建好，都处于可用状态。但是组件的模板结构尚未生成！
        // 常用于ajax请求发数据 PS：请求的结果会在 beforeUpdate 之前返回
        created() {
            // this.initBookList()
            console.log('created')
            const dom = document.querySelector('#myh3')
            console.log(dom)
        },

        // 基于数据和模板在内存中编译生成的HTML结构

        // （不重要）创建阶段的第三个生命周期函数 还未将编译好的HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构
        beforeMount() {
            console.log('beforeMount')
            const dom = document.querySelector('#myh3')
            console.log(dom)
            console.log(this.$el)
        },
        // （重要）创建阶段的第四个生命周期函数 已将内存中的HTML结构渲染到浏览器中。此时浏览器中已包含当前组件的DOM结构
        // 如果要操作 dom 元素，最早要在 mounted 中操作
        mounted() {
            console.log('mounted')
            const dom = document.querySelector('#myh3')
            console.log(dom)
            console.log(this.$el)
        },

        // 创建阶段完成，进入运行阶段
        // PS：如有 ajax 请求等异步请求，请求的结果在 beforeUpdate 之前返回并放入data中，意味着数据更新了一次
        // 运行阶段的钩子函数最少被执行0次，最多N次

        // 运行阶段的第一个生命周期函数 vue中的数据已更新，但仍未渲染到模板中
        beforeUpdate() {
            console.log('beforeUpdate')

            console.log(this.message)
            const dom = document.querySelector('#ppp')
            console.log(dom.innerHTML)
        },
        // 运行阶段的第二个生命周期函数 vue中的数据已更新，并且渲染到模板中
        updated() {
            console.log('updated')

            console.log(this.message)
            const dom = document.querySelector('#ppp')
            console.log(dom.innerHTML)
        },

        // 使用 v-if 等销毁组件时进入销毁阶段

        // 销毁阶段的第一个生命周期函数 将要销毁此组件，尚未销毁，组件处于正常工作状态
        beforeDestroy() {
            console.log('beforeDestroy')
            const dom = document.querySelector('#ppp')
            console.log(dom)
        },
        // 销毁阶段的第二个生命周期函数 组件已经被销毁，此组件在浏览器中对应的 dom 结构已被完全移除
        destroyed() {
            console.log('destroyed')
            const dom = document.querySelector('#ppp')
            console.log(dom)
        }
    }
</script>

<style lang="less" scoped>
    .test-container {
        background-color: pink;
        height: 200px;
    }
</style>